<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>预约页面</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{url('/css/main.css')}}">
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <!-- Noty 提示框的js集成 -->
    <script src="{{ url('vendor/noty-2.2.9/packaged/jquery.noty.packaged.js') }}"></script>
    <script src="{{ url('vendor/noty-2.2.9/themes/bootstrap.js') }}"></script>
    <script src="{{ url('vendor/noty-2.2.9/options.js') }}"></script>
</head>

<body>
<div id="body">
    <div class="panel panel-default page-header">
        <div class="panel-body">
            <div class="info-container">
                <div class="flex-2">
                    <img title="医生图" src="{{route('Api.Image.ShowPX',[$doctor->doc_img,'100px'])}}" alt="">
                </div>
                <div class="flex-3">
                    <p>{{$doctor->doc_name}}</p>
                    <p>{{$doctor->station}}</p>
                </div>
            </div>
        </div>
        <p class="detail-info">{{$doctor->introduction}}</p>
    </div>
    <!-- 日历 -->
    <div class="confirm-container ui-beautify">
        <div class="title">挂号费:￥{{$doctor->fee}}</div>
        <div class="date-wrapper">
            <!-- 星期几 渲染后7天 -->
            <div class="single-date weeks">
                <span></span>
            </div>
            <div class="single-date weeks">
                <span></span>
            </div>
            <div class="single-date weeks">
                <span></span>
            </div>
            <div class="single-date weeks">
                <span></span>
            </div>
            <div class="single-date weeks">
                <span></span>
            </div>
            <div class="single-date weeks">
                <span></span>
            </div>
            <div class="single-date weeks">
                <span></span>
            </div>
            <!-- 日期 -->
            <div class="single-date day selected" value="<?php echo date('Y-m-d',time()+ 60*60*24);?>">
                <span ><?php echo date('d',time()+ 60*60*24).'号';?></span>
                <span class="glyphicon glyphicon-ok"></span>
            </div>
            @for($i = 2 ;$i <8;$i++)
                <div class="single-date day" value="<?php echo date('Y-m-d',time()+ 60*60*24*$i);?>">
                    <span ><?php echo date('d',time() + 60*60*24*$i).'号';?></span>
                    <span class="glyphicon glyphicon-ok"></span>
                </div>
            @endfor

        </div>
        <div class="confirm-info">
            <div class="single-info">
                <span></span>可预约
            </div>
            <div class="single-info">
                <span class="disable"></span>不可约
            </div>
            <div class="single-info">
                <span class="had"></span>已选择
            </div>
        </div>
        <!-- 每天  6 个时段 -->
        <div class="single">
            <!-- 单日预约详细情况 -->
            <div class="day-during">
                <div class="day-line">
                        <span>
							AM
							上午
						</span>
                        <span>
							PM
							下午
						</span>
                </div>
                <div class="day-info">
                    <!-- data-index 后端渲染 -->
                    @for($i=1 ,$k = 0; $i<7;$i++)
                        <div class="time-line
                        @if($doctor->hugs)
                            @for($j = 0; $j< count($doctor->hugs); $j++)
                                 @if($doctor->hugs[$j]->hugh_slot == $i || $doctor->hugs[$j]->hugh_slot == '0')
                                    disable
                                 @elseif($doctor->hugs[0]->hugh_slot -1 == '0' && ($j != count($doctor->hugs)-1 && $doctor->hugs[$j+1]->hugh_slot != $i && $k++ == 0))
                                    hadchosed
                                 @elseif($doctor->hugs[0]->hugh_slot -1 == '0' && ($j == count($doctor->hugs)-1) && $doctor->hugs[$j]->hugh_slot == $i-1 && $k++ == 0)
                                    hadchosed
                                 @elseif($doctor->hugs[0]->hugh_slot -1 != '0' && $i == 1)
                                    hadchosed
                                 @endif
                            @endfor
                        @elseif($i == '1')
                                hadchosed
                        @endif" data-index= {{$i}}>
                            <div>可预约</div>
                            <div>{{$times[$i - 1]}}</div>
                        </div>

                    @endfor


                </div>
            </div>
        </div>

    </div>
    <div class="data-get-container">
        <!--<form action="">-->
            <label for="">
                <span>姓名</span>
                <input type="text" placeholder="请输入信息" value="{{$user_info->realname}}">
            </label>
            <label for="">
                <span>手机号</span>
                <input type="text" placeholder="请输入信息"  value="{{$user_info->phone}}">
            </label>
            <label for="">
                <span>出生日期</span>
                <input type="text" placeholder="请输入信息" value="{{date('Y-m-d',strtotime($user_info->birthday))}}">
            </label>
            <button type="button" class="btn btn-warning">提交预约</button>
        <!--</form>-->
    </div>
    <div class="cover-tip">
        <div class="content">
            <span class="close">X</span>
            <p class="title">挂号免责声明</p>
            <div class="text-info">
                <p>只要一个步骤，即可完成挂号，如您选择普通号系统将收取4元挂号，如您选择专家收取7元挂号费</p>
                <span>注意</span>
                <p>1、网上挂号必须具有我院（就诊ID号），首次网上挂号时系统会自动转至个人资料填写页，请认真填写个人信息，特别注意检查（就诊ID号）是否正确是否为本院就诊ID号。</p>
                <p>2、预约挂号因本人信息填写错误导致挂号信息错误或无法挂号的，个人承担责任。</p>
                <p>3、如（就诊ID号）错误 或 无（就诊ID号），平台将按初诊患者对待重新分配新ID号，后果由患者本人负责。</p>
                <p>4、网上挂号如非本院因素挂号提交后不作改期、退费办理。</p>
                <p>5、鉴于医院特殊性，医生遇到抢救、急诊、临时停诊、等特殊事件时、造成用户损失的，平台做退费处理或安排同级别医生接诊。</p>
                <span>就诊当日不做修改</span>
            </div>
            <button type="button" class="btn btn-warning">提交预约</button>
        </div>
    </div>
</div>
<script>
    var flag = false;
    console.log($('.single-date.day.selected').attr('value'));
    $(function(){
        var weeks = ['周日', '周一','周二','周三','周四','周五','周六'];
        var today = new Date().getDay();
        var res = weeks.slice(today+1).concat(weeks.slice(0,today+1));
        $.each(res , function(index , obj){
            $('.single-date.weeks').eq(index).children('span').text(obj);
        })
    })
    function WXPayment(configJSON) {
        if (typeof WeixinJSBridge === 'undefined') {
            alert('请在微信在打开页面！');
            return false;
        }
        WeixinJSBridge.invoke('getBrandWCPayRequest', configJSON, function (res) {
            switch (res.err_msg) {
                case 'get_brand_wcpay_request:cancel':
                    alert('用户取消支付！');
                    break;
                case 'get_brand_wcpay_request:fail':
                    alert('支付失败！（' + res.err_desc + '）');
                    break;
                case 'get_brand_wcpay_request:ok':
                    noty({text:'支付成功',type:'success',timeout:600,
                        callback:{
                            afterClose:function(){
                                window.location.href='{{route('M.Home.orderList')}}';
                            }
                        }
                    });
                    break;
                default:
                    alert(JSON.stringify(res));
                    break;
            }
        });
    }

    // 选择日期
    $(".single-date.day").click(function(){
        var data = {{$doctor->id}} + '_' + $(this).attr('value');
        var k = 0;
        $.get('/api/get-doctor-hug/' + data, function (data, res) {

            for (var i = 1; i<7 ;i++){
                $("[data-index = '"+ i +"']").removeClass('disable');
                $("[data-index = '"+ i +"']").removeClass('hadchosed');
            }
            if (!data.data || data.data == ''){
                $("[data-index = '"+ 1 +"']").addClass('hadchosed');
            }else {

                for (var i = 0 ;i < data.data.length;i++){
                    $("[data-index = '"+ data.data[i].hugh_slot +"']").addClass('disable');
                    if (data.data[0].hugh_slot -1 !=0){
                        $("[data-index = '"+ 1 +"']").addClass('hadchosed');
                    }else {

                        if (data.data[0].hugh_slot -1 == 0 && i != data.data.length -1 && data.data[i+1].hugh_slot != i+2 && k++ == 0){
                            var d = i+2;
                            $("[data-index = '"+ d +"']").addClass('hadchosed');
                        }else {
                            if (data.data[0].hugh_slot -1 == 0 && i == data.data.length -1 && data.data[i].hugh_slot == i+1 && k++ == 0){
                                var d = i+2;
                                $("[data-index = '"+ d +"']").addClass('hadchosed');
                            }
                        }
                    }
                }
            }

        });
        var _index = $.makeArray($('.day')).indexOf($(this)[0]);
        $('.single-date.day').eq(_index).addClass('selected').siblings().removeClass('selected');
        var show_obj = $('.single').eq(_index);
        if(show_obj){
            show_obj.show().siblings('.single').hide();
        }
    })
    // 确定预约时间
    $('.time-line').click(function(){
        if($(this).hasClass('disable')){
            return false;
        }
        $(this).addClass('hadchosed').siblings().removeClass('hadchosed');
        var ind = parseInt($(this).data('index'));
        var parent = $(this).parents('.single')[0];

    })
    $(".btn.btn-warning").click(function(e){
        e.stopPropagation();
        if(!flag){
            $(".cover-tip").show();
            flag = true;
        }else{
            $.ajax({
                type:"post",
                url:'{{route('Api.YiLiao.submitDoctorBespoke')}}',
                dataType:"json",
                data:{
                    'name':"{{$user_info->realname}}",
                    'born':"{{date('Y-m-d',strtotime($user_info->birthday))}}",
                    'phone':"{{$user_info->phone}}",
                    'doc_id':"{{$doctor->id}}",
                    'slot':$('.time-line.hadchosed').attr('data-index'),
                    'time':$('.single-date.day.selected').attr('value')
                },
                success:function(obj){
                    if(obj.level == "success"){
                        $.post('/api/wechat/wpay',{
                            order_num:obj.data.order_num
                        },function(data,res){
                            WXPayment(data.data);
                        });

                    }
                },
                error:function(obj){
                    var datajson = obj.responseJSON;
                    noty({text:datajson.message,type:datajson.level,timeout:800,
                        callback:{
                            afterClose:function(){
                                location.reload();
                            }
                        }
                    });
                }
            });
//            $('form').submit();
            {{--$.post('/api/submint-doctor-bespoke', {--}}

                {{--name:"{{$user_info->realname}}",--}}
                {{--born:"{{date('Y-m-d',strtotime($user_info->birthday))}}",--}}
                {{--phone:"{{$user_info->phone}}",--}}
                {{--doc_id:"{{$doctor->id}}",--}}
                {{--slot:$('.time-line.hadchosed').attr('data-index'),--}}
                {{--time:$('.single-date.day.selected').attr('value')--}}
            {{--},function (data, res) {--}}

                {{--if (data.level == 'success'){--}}
                    {{--$.post('/api/wechat/wpay',{--}}

                        {{--order_num:data.data.order_num--}}
                    {{--},function(data,res){--}}
                        {{--WXPayment(data.data);--}}
                    {{--});--}}
                {{--}--}}
            {{--});--}}
        }
    })
    $('.cover-tip,.close').click(function(e){
        var target = e.target;
        if(target == $(".cover-tip .content")[0]){
            return false;
        }
        $(".cover-tip").hide();
    })

</script>
</body>

</html>
